<template>
  <view>
    <view class="box_1">
      <view class="self_head">
        <!-- <view class="self_back" @click="$emit('closeCompetitive')"></view>
        竞争力分析 -->
      </view>
      <view class="info_box">
        <view class="tx1">职位统计</view>
        <view class="tx2">全面了解竞争对手，帮您知己知彼</view>
        <view class="tx3">
          竞争者：
          <text class="num">{{ info.competitor_total }}</text>
        </view>
        <view class="tx3 right">
          被查看：
          <text class="num">{{ info.looked_total }}</text>
        </view>
      </view>
    </view>
    <view class="cop_put"><view class="self_content">我的职位匹配度</view></view>
    <view class="box_2">
      <view class="self_content " :class="'level_' + info.match_level">
        <view class="sp_block s1"></view>
        <view class="sp_block s2"></view>
        <view class="sp_block s3"></view>
        <view class="percent"></view>
        <view class="cir_block"></view>
        <view class="percent_text t1">一般</view>
        <view class="percent_text t2">良好</view>
        <view class="percent_text t3">优秀</view>
      </view>
    </view>
    <view class="box_3">
      <view class="cop_put"><view class="self_content">匹配详情</view></view>
      <view class="list">
        学历：
        <text>{{ info.match_result.education.cn }}</text>
        <view
          class="ico "
          :class="info.match_result.education.is_match == 0 ? 'fail' : 'done'"
        ></view>
      </view>
      <view class="list">
        经验：
        <text>{{ info.match_result.experience.cn }}</text>
        <view
          class="ico "
          :class="info.match_result.experience.is_match == 0 ? 'fail' : 'done'"
        ></view>
      </view>
      <view class="list">
        类别：
        <text>{{ info.match_result.category.cn }}</text>
        <view
          class="ico "
          :class="info.match_result.category.is_match == 0 ? 'fail' : 'done'"
        ></view>
      </view>
      <view class="list">
        地区：
        <text>{{ info.match_result.district.cn }}</text>
        <view
          class="ico "
          :class="info.match_result.district.is_match == 0 ? 'fail' : 'done'"
        ></view>
      </view>
      <view class="list">
        薪资：
        <text>{{ info.match_result.wage.cn }}</text>
        <view
          class="ico "
          :class="info.match_result.wage.is_match == 0 ? 'fail' : 'done'"
        ></view>
      </view>
      <view class="list">
        简历完整度：
        <text>{{ info.match_result.complete_percent.cn }}</text>
        <view
          class="ico "
          :class="
            info.match_result.complete_percent.is_match == 0 ? 'fail' : 'done'
          "
        ></view>
      </view>
    </view>
    <view class="sp_bar"></view>
    <view class="box_4">
      <view class="cop_put">
        <view class="self_content">全站同行学历分布统计</view>
      </view>
      <view class="sheet_box clearfix">
        <view class="y">100%</view>
        <view class="x">
          <view
            class="list"
            v-for="(item, index) in info.statistics_education"
            :key="index"
            :style="'height:' + item.percent + '%;'"
          >
            <view class="text">{{ item.label }}</view>
            <view class="num">{{ item.percent }}%</view>
            <view class="position" v-if="item.here == 1">我在这里</view>
          </view>
        </view>
        <view class="clear"></view>
      </view>
    </view>
    <view class="box_4">
      <view class="cop_put">
        <view class="self_content">全站同行工作经验分布</view>
      </view>
      <view class="sheet_box clearfix">
        <view class="y">100%</view>
        <view class="x">
          <view
            class="list"
            v-for="(item, index) in info.statistics_experience"
            :key="index"
            :style="'height:' + item.percent + '%;'"
          >
            <view class="text">{{ item.label }}</view>
            <view class="num">{{ item.percent }}%</view>
            <view class="position" v-if="item.here == 1">我在这里</view>
          </view>
        </view>
        <view class="clear"></view>
      </view>
    </view>
    <view class="box_4">
      <view class="cop_put">
        <view class="self_content">全站同行期望薪资分布</view>
      </view>
      <view class="sheet_box">
        <view class="y">100%</view>
        <view class="x">
          <view
            class="list"
            v-for="(item, index) in info.statistics_wage"
            :key="index"
            :style="'height:' + item.percent + '%;'"
          >
            <view class="text">{{ item.label }}</view>
            <view class="num">{{ item.percent }}%</view>
            <view class="position" v-if="item.here == 1">我在这里</view>
          </view>
        </view>
        <view class="clear"></view>
      </view>
    </view>
    <view class="box_5">
      *以上所展示的数据仅对{{
        sitename
      }}的用户样本数据负责，反应的竞争力数据仅供参考。简历完整度越高，求职竞争力越大。
    </view>
  </view>
</template>

<script>
import {mapState} from 'vuex'
export default {
  name: 'JobCompetitive',
  props: ['info'],
  computed:{
	  ...mapState({
		  sitename:state=>state.config.sitename
	  })
  }
}
</script>

<style lang="scss" scoped>
.box_1 {
  width: 100%;
  background-image: url($ImgUrl + 'competitive_top_bg.png');
  background-position: center 0;
  background-repeat: no-repeat;
  background-size: 100% 302rpx;
  margin-bottom: 72rpx;
}
.box_1 .self_head {
  position: relative;
  text-align: center;
  font-size: 36rpx;
  font-weight: bold;
  color: #ffffff;
  line-height: 1;
  padding: 36rpx 0;
}
.box_1 .self_head .self_back {
  position: absolute;
  left: 0;
  top: 0;
  width: 90rpx;
  height: 100%;
  background-image: url($ImgUrl + 'competitive_back.png');
  background-position:center;
  background-repeat: no-repeat;
  background-size:40rpx;
}
.box_1 .info_box {
  width: 680rpx;
  height: 200rpx;
  margin: 0 auto;
  border-radius: 14rpx;
  box-shadow: 0 2rpx 10rpx #c2c2c2;
  line-height: 1;
  position: relative;
  background-image: url($ImgUrl + 'competitive_top_info_bg.png');
  background-position:0 bottom ;
  background-repeat: no-repeat;
  background-color: #ffffff;
  background-size: 680rpx 72rpx;
}
.box_1 .info_box .tx1 {
  padding: 30rpx 0 0 30rpx;
  font-size: 30rpx;
  font-weight: bold;
  color: #333333;
}
.box_1 .info_box .tx2 {
  font-size: 24rpx;
  color: #999999;
  position: absolute;
  right: 30rpx;
  top: 32rpx;
}
.box_1 .info_box .tx3 {
  font-size: 28rpx;
  color: #666666;
  position: absolute;
  left: 100rpx;
  top: 110rpx;
}
.box_1 .info_box .tx3 .num {
  color: #fa7445;
}
.box_1 .info_box .tx3.right {
  left: 440rpx;
}

.cop_put {
  width: 100%;
  text-align: center;
}
.cop_put .self_content {
  display: inline-block;
  font-size: 30rpx;
  font-weight: bold;
  color: #333333;
  position: relative;
  padding: 0 110rpx;
  line-height: 1;
}
.cop_put .self_content::before {
  content: ' ';
  position: absolute;
  left: 0;
  top: 50%;
  transform: translate(0, -50%);
  width: 90rpx;
  height: 2rpx;
  background: linear-gradient(to right, #fdfdfd, #e2e2e2);
}
.cop_put .self_content::after {
  content: ' ';
  position: absolute;
  right: 0;
  top: 50%;
  transform: translate(0, -50%);
  width: 90rpx;
  height: 2rpx;
  background: linear-gradient(to right, #e2e2e2, #fdfdfd);
}

.box_2 {
  padding: 50rpx 0 100rpx;
}
.box_2 .self_content {
  position: relative;
  width: 650rpx;
  height: 20rpx;
  margin: 0 auto;
  background-color: #f3f3f3;
  border-radius: 20rpx;
}
.box_2 .self_content .percent {
  position: absolute;
  left: 0;
  top: 0;
  border-radius: 10rpx;
  height: 100%;
}
.box_2 .self_content .sp_block {
  position: absolute;
  width: 4rpx;
  height: 100%;
  background-color: #ffffff;
  z-index: 2;
}
.box_2 .self_content .sp_block.s1 {
  left: 124rpx;
  top: 0;
}
.box_2 .self_content .sp_block.s2 {
  left: 334rpx;
  top: 0;
}
.box_2 .self_content .sp_block.s3 {
  left: 524rpx;
  top: 0;
}
.box_2 .self_content .cir_block {
  position: absolute;
  width: 30rpx;
  height: 30rpx;
  border-radius: 100%;
  background-color: #ffffff;
  box-shadow: 0 0 20rpx #c2c2c2;
  z-index: 3;
  top: -6rpx;
}
.box_2 .self_content.level_1 .percent {
  width: 124rpx;
  background: linear-gradient(to right, #6de078, #9ae068);
}
.box_2 .self_content.level_1 .cir_block {
  left:110rpx;
}
.box_2 .self_content.level_1 .t1 {
  color: #fa7445;
}
.box_2 .self_content.level_2 .percent {
  width: 334rpx;
  background: linear-gradient(to right, #6de078, #cfe055, #ead447);
}
.box_2 .self_content.level_2 .cir_block {
  left: 320rpx;
}
.box_2 .self_content.level_2 .t2 {
  color: #fa7445;
}
.box_2 .self_content.level_3 .percent {
  width: 100%;
  background: linear-gradient(to right, #6de078, #f6d144, #ff7a31);
}
.box_2 .self_content.level_3 .cir_block {
  left: 520rpx;
}
.box_2 .self_content.level_3 .t3 {
  color: #fa7445;
}
.box_2 .self_content .percent_text {
  position: absolute;
  bottom: -50rpx;
  font-size: 26rpx;
  color: #666666;
}
.box_2 .self_content .percent_text.t1 {
  left: 100rpx;
}
.box_2 .self_content .percent_text.t2 {
  left: 314rpx;
}
.box_2 .self_content .percent_text.t3 {
  left: 502rpx;
}

.box_3 {
  width: 680rpx;
  margin: 0 auto 70rpx;
  border-radius: 14rpx;
  padding: 54rpx 38rpx 34rpx;
  box-shadow: 0 0 30rpx #f2f1f1;
}
.box_3 .cop_put {
  margin-bottom: 26rpx;
}
.box_3 .list {
  position: relative;
  width: 100%;
  line-height: 1;
  padding: 20rpx 60rpx 20rpx 0;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
  font-size: 28rpx;
  color: #999999;
}
.box_3 .list text {
  color: #666666;
}
.box_3 .list .ico {
  position: absolute;
  right: 0;
  top: 0;
  width: 34rpx;
  height: 100%;
}
.box_3 .list .ico.done {
  background-image: url($ImgUrl + 'cop_list_done.png');
  background-repeat: no-repeat;
  background-position:0 center ;
  background-size: 34rpx;
}
.box_3 .list .ico.fail {
  background-image: url($ImgUrl + 'cop_list_fail.png');
  background-position:0 center ;
  background-repeat: no-repeat;
  background-size: 34rpx;
}

.sp_bar {
  width: 100%;
  height: 10rpx;
  background-color: #f3f3f3;
}

.box_4 {
  padding-top: 64rpx;
}
.box_4 .sheet_box {
  width: 100%;
  padding-top: 58rpx;
  margin-bottom: 54rpx;
}
.box_4 .sheet_box .y {
  float: left;
  width: 100rpx;
  height: 280rpx;
  border-right: 4rpx solid #e2e2e2;
  color: #666666;
  font-size: 24rpx;
  writing-mode: tb;
  padding: 6rpx 8rpx;
}
.box_4 .sheet_box .x {
  float: left;
  width: 580rpx;
  height: 280rpx;
  border-bottom: 4rpx solid #e2e2e2;
  display: flex;
  align-items: flex-end;
}
.box_4 .sheet_box .x .list {
  flex: 1;
  background: #1787fb;
  margin: 0 36rpx;
  position: relative;
  height: 30%;
}
.box_4 .sheet_box .x .list .num {
  position: absolute;
  top: -40rpx;
  left: 0;
  width: 100%;
  color: #1787fb;
  font-size: 24rpx;
  text-align: center;
}
.box_4 .sheet_box .x .list .position {
  position: absolute;
  top: -50rpx;
  left: 50%;
  width: 112rpx;
  color: #ffffff;
  font-size: 20rpx;
  background-color: #ff6600;
  line-height: 1;
  padding: 10rpx 0;
  transform: translate(-50%, 0);
  text-align: center;
  border-radius: 42rpx;
}
.box_4 .sheet_box .x .list .position::after {
  content: ' ';
  display: block;
  position: absolute;
  width: 0;
  height: 0;
  border: 10rpx solid transparent;
  border-top-color: #ff6600;
  left: 50%;
  transform: translate(-50%, 0);
  bottom: -20rpx;
}
.box_4 .sheet_box .x .list .text {
  font-size: 24rpx;
  color: #666666;
  text-align: center;
  line-height: 1;
  width: 172rpx;
  position: absolute;
  bottom: -40rpx;
  left: 50%;
  transform: translate(-50%, 0);
}

.box_5 {
  padding: 20rpx 32rpx 0 32rpx;
  line-height: 1.8;
  font-size: 24rpx;
  color: #999999;
  word-break: break-all;
}
</style>
